<template>
  <div class="content-wrapper">
    <div class="data-analysis-model">
      <TableTitleModel :dataType="params1"></TableTitleModel>
      <div class="content-model">
        <transition name="el-fade-in-linear" mode="out-in">
          <EightTableData v-if="isShowEightData"></EightTableData>
          <DataAnalyzeEight v-else></DataAnalyzeEight>
        </transition>
      </div>
    </div>

    <div class="data-analysis-model">
      <TableTitleModel :dataType="params2"></TableTitleModel>
      <div class="content-model">
        <transition name="el-fade-in-linear" mode="out-in">
          <ThreeTableData v-if="isShowThreeData"></ThreeTableData>
          <div class="chart-box flex" v-else>
            <DataAnalyzeType class="left"></DataAnalyzeType>
            <DataAnalyzeThree class="right"></DataAnalyzeThree>
          </div>
        </transition>
      </div>
    </div>

    <div class="data-analysis-model">
      <TableTitleModel :dataType="params3"></TableTitleModel>
      <div class="content-model">
        <transition name="el-fade-in-linear" mode="out-in">
          <ClassroomTableData v-if="isShowClassroomData"></ClassroomTableData>
          <DataAnalyzeClassroom v-else></DataAnalyzeClassroom>
        </transition>
      </div>
    </div>

    <div class="data-analysis-model">
      <StudentMarkTable></StudentMarkTable>
      <div class="content-model">
        <transition name="el-fade-in-linear" mode="out-in">
          <GradeTableData v-if="isShowGradeData"></GradeTableData>
          <DataAnalyzeGrade v-else></DataAnalyzeGrade>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import TableTitleModel from "../../components/TableTitleModel";
import StudentMarkTable from "../../components/StudentMarkTable";
import ThreeTableData from "../../components/table-model/ThreeTableData";
import EightTableData from "../../components/table-model/EightTableData";
import GradeTableData from "../../components/table-model/GradeTableData";
import ClassroomTableData from "../../components/table-model/ClassroomTableData";
import DataAnalyzeEight from "../../components/echarts-model/DataAnalyzeEight";
import DataAnalyzeThree from "../../components/echarts-model/DataAnalyzeThree";
import DataAnalyzeClassroom from "../../components/echarts-model/DataAnalyzeClassroom";
import DataAnalyzeGrade from "../../components/echarts-model/DataAnalyzeGrade";
import DataAnalyzeType from "../../components/echarts-model/DataAnalyzeType";
import { mapActions } from "vuex";

export default {
  components: {
    TableTitleModel, StudentMarkTable,
    ThreeTableData, EightTableData, GradeTableData, ClassroomTableData,
    DataAnalyzeEight, DataAnalyzeThree, DataAnalyzeClassroom, DataAnalyzeGrade, DataAnalyzeType
  },
  data() {
    return {
      params1: {
        title: "八项数据分析",
        type: 1
      },
      params2: {
        title: "三项数据分析",
        type: 2
      },
      params3: {
        title: "课堂三项数据",
        type: 3
      },
      isShowEightData: false,
      isShowThreeData: false,
      isShowClassroomData: false,
      isShowGradeData: false
    }
  },
  computed: {},
  created() {
  },
  mounted() {
    this.getCourseList();
    this.getGradeList();
  },
  methods: {
    ...mapActions(["getCourseList", "getGradeList"]),

    // 图表/表格切换
    cutDataType(type, index) {
      if (type == 1) {
        if (index == 1) {
          this.isShowEightData = false;
        } else {
          this.isShowEightData = true;
        }
      } else if (type == 2) {
        if (index == 1) {
          this.isShowThreeData = false;
        } else {
          this.isShowThreeData = true;
        }
      } else if (type == 3) {
        if (index == 1) {
          this.isShowClassroomData = false;
        } else {
          this.isShowClassroomData = true;
        }
      } else if (type == 4) {
        if (index == 1) {
          this.isShowGradeData = false;
        } else {
          this.isShowGradeData = true;
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '../../styles/variable';

.content-wrapper {
  padding: 30px 0 50px 0;

  .data-analysis-model {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }

    .content-model {
      width: 100%;
      height: 510px;
      padding: 30px;
      background: #ffffff;
      border-radius: 0 0 10px 10px;

      .chart-box {
        width: 100%;
        height: 100%;

        .left {
          width: 40% !important;
        }

        .right {
          flex: 1;
        }
      }
    }
  }
}
</style>
